<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="register">
    <view class="register-background">
      <wd-img src="/static/images/shop.png" width="120rpx" height="100rpx"></wd-img>
      <text>好特麦门店端</text>
    </view>
    <wd-form :model="state.data" ref="form" custom-class="register-form" errorType="message">
      <wd-input
        placeholder="请输入账号"
        v-model="state.data.username"
        :rules="[{ required: true, message: '请填写账号' }]"
        prefix-icon="user"
      ></wd-input>
      <wd-input
        placeholder="请输入手机号"
        v-model="state.data.phone"
        :rules="[{ required: true, message: '请填写手机号' }]"
        prefix-icon="phone"
      ></wd-input>
      <wd-input
        placeholder="请输入密码"
        v-model="state.data.password"
        :rules="[{ required: true, message: '请填写密码' }]"
        showPassword
        prefix-icon="lock-on"
      ></wd-input>
      <wd-input
        placeholder="请再次输入密码"
        v-model="state.data.repassword"
        :rules="[{ required: true, message: '请再次填写密码' }]"
        showPassword
        prefix-icon="lock-on"
      ></wd-input>
      <htm-button block @click="handleClick">注册并登录</htm-button>
      <wd-checkbox v-model="state.agree">
        注册同意协议
        <text @click="toUserPrivacy">《服务协议、隐私政策》</text>
      </wd-checkbox>
    </wd-form>
    <view class="register-bottom">
      <view class="entry-item" @click="handleLogin">
        <image class="entry-icon" src="/src/static/images/register.png" mode="aspectFit"></image>
        <text class="entry-text">门店登录</text>
      </view>
      <view class="entry-item" @click="handleDriver">
        <image class="entry-icon" src="/src/static/images/driver.png" mode="aspectFit"></image>
        <text class="entry-text">司机登录</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { IMpRegisterParams, mpregister } from '@/service/register/register'

const form = ref()

const state = reactive({
  data: { openid: '' } as IMpRegisterParams,
  agree: false as boolean,
})
const handleLogin = () => {
  uni.redirectTo({
    url: '/pages/login/login?operate=store',
  })
}
const handleDriver = () => {
  uni.redirectTo({
    url: '/pages/login/login?operate=driver',
  })
}

const toUserPrivacy = () => {
  uni.navigateTo({
    url: '/pages/user-privacy/user-privacy',
  })
}
const handleClick = () => {
  form.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        if (!state.agree) {
          uni.showToast({
            icon: 'none',
            title: '请同意协议后在点击注册',
          })
          return
        }
        if (state.data.password !== state.data.repassword) {
          uni.showToast({
            icon: 'none',
            title: '两次输入密码不一致',
          })
          return
        }
        const resultRegister = await mpregister(state.data)
        if (resultRegister.success) {
          handleLogin()
        }
        uni.showToast({
          icon: 'none',
          title: resultRegister.message,
        })
        // const { loading, error, data, run } = useRequest<IMpLoginResult>(() => mplogin(state.data))
        // const result = await run()
        // await uni.setStorageSync('token', result.token)
        // if (result?.token) {
        //   uni.switchTab({
        //     url: '/pages/index/index',
        //   })
        // }
      }
    })

    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>

<style lang="scss" scoped>
@import '/src/style/index';
.register {
  position: relative;
  height: (100vh);
  height: calc(100vh - constant(safe-area-inset-bottom));
  height: calc(100vh - env(safe-area-inset-bottom));
}
.register-background {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 36vh;
  color: white;
  background: linear-gradient(to bottom, var(--wot-color-theme), #ff6464);
  .wd-img {
    margin-top: -60rpx;
  }
  text {
    margin-top: 30rpx;
    font-size: 70rpx;
    font-weight: bold;
  }
}

.register-bottom {
  position: absolute;
  bottom: 40rpx;
  display: flex;
  justify-content: center;
  width: 100vw;
}

.entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 80rpx;
}

.entry-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.entry-text {
  font-size: 24rpx;
  color: #666666;
}

.entry-item:active {
  opacity: 0.8;
}
</style>
<style lang="scss">
@import '/src/style/index';
.register-form {
  width: calc(90vw - 120rpx);
  padding: 10rpx 40rpx 40rpx;
  margin: 0 auto;
  margin-top: -100rpx;
  text-align: center;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  .wd-input,
  .wd-button {
    margin-top: 40rpx;
  }
  .wd-input {
    height: 68rpx;
    padding: 10rpx 20rpx;
    background-color: #f8f8f8;
    border-radius: 10rpx;
    :deep(.wd-input__icon) {
      font-size: 40rpx;
      background-color: transparent;
    }
  }
  :deep(.wd-input)::after {
    background-color: transparent;
  }
  :deep(.wd-input.is-not-empty):not(.is-disabled)::after {
    background-color: transparent;
  }
  .wd-button {
    height: 80rpx;
  }
  .wd-checkbox {
    margin-top: 80rpx;
    :deep(.wd-checkbox__txt) {
      font-size: 24rpx;
      color: var(--wot-color-theme);
    }
  }
}
</style>
